<template>
	<view class="container">
		<!-- 商品轮播图 -->
		<view class="carousel">
			<!--轮播图-->
			<swiper class="home-swiper" indicator-dots="true" :autoplay="autoplay" :interval="interval"
				:circular="circular" :duration="duration">
				<block v-for="(item,index) in listPic" :key="index">
					<swiper-item class="swiper-item">
						<image :src="item.imageUrl" class="slide-image"/>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<view class="introduce-section">
			<text class="title">{{goods.goodsName}}</text>
			<view class="price-box">
				<text class="price-tip">￥</text>
				<text class="price">{{goods.salePrice}}</text>
				<text class="m-price">￥{{goods.initPrice}}</text>
			</view>
			<view class="bot-row">
				<text>销量：{{goods.saleNum}}</text>
				<text>库存：{{goods.inventoryNum}}</text>
				<text>浏览量：{{goods.browseNum}}</text>
			</view>
		</view>
		<!-- 分享 -->
		<view class="share-section">
			<!-- 添加一个按钮 -->
			<view class="addCart">
				<button style="height: 80rpx;" @click="addToShopCart(goods.id)">加入购物车</button>
			</view>
			<!-- 添加一个按钮 -->
			<view class="mall">
				<button style="height: 80rpx;" @click="atOnce(goods.id)">立即购买</button>
			</view>
		</view>
		<!-- 中间部分  -购买类型 -->
		<view class="c-list"></view>
		<van-action-sheet>
			<!-- 类型信息 -->
			<view class="typeInformation"></view>
		</van-action-sheet>

		<!-- 中间部分 -促销活动 -->
		<view class="c-row b-b">
			<text class="tit">促销活动</text>
			<view class="con-list">
				<text>新人首单送20元无门槛代金券</text>
				<text>订单满300减20</text>
				<text>订单满500减50元</text>
				<text>单笔购买满两件免邮费</text>
			</view>
		</view>
		<!-- 中间部分 -服务 -->
		<view class="c-row b-b">
			<text class="tit">服务</text>
			<view class="bz-list con">
				<text>7天无理由退货 ·</text>
				<text>假一赔十 · </text>
			</view>
		</view>


        <!-- 分享 -->
		<view class="share-section">
			<!-- 添加一个按钮 -->
			<view class="addCart">
			<text class="attr" @click="addCommon(goods.id)">添加商品评论 &gt;&gt;</text>
			</view>
		</view>
		<!-- 评价 -->
		<view class="eva-section">
			<view class="e-header">
				<van-cell v-if="commonCount < 6">
					<view slot="title">
						<view class="van-cell-left">共 {{commonCount}} 条评论：</view>
					</view>
				</van-cell>
				<van-cell v-else>
					<view slot="title">
						<view class="van-cell-left" @click="listGoodsCommon(goods.id)">更多评论&gt;&gt;</view>
					</view>
				</van-cell>
			</view>
		</view>
		<view class="eva-section" v-for="(item,index) in listCommon">
			<view class="eva-box">
				<image width="100%" height="100%" round class="myPhoto" :src="item.commonImage">
				</image>
				<view class="right">
					<text class="name">用户：{{item.userNick}}</text>
					<text class="con">{{item.commonContent}}</text>
					<view class="bot">
						<text class="attr"></text>
						<text class="time">评论日期：{{item.createTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 图文详情 -->
		<view class="detail-desc">
			<view class="d-header">
				<text>———— 图文详情 ————</text>
			</view>
			<view class="d-photo" v-for="(photo,index) in listDescImg" :key="index">
				<van-image width="100%" height="100%" class="photo">
					<image :src="photo.imageUrl" class="slide-image" />
				</van-image>
				<view class="right">
					<text class="name"></text>
					<text class="con"></text>
					<view class="bot">
						<text class="attr"></text>
						<text class="time">{{photo.imageDesc}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="bottom"></view>
		<commonUserTabBar :currentTab="currentTab"></commonUserTabBar>
	</view>
</template>

<script>
import global from '@/global.js'
	export default {
		data() {
			return {
				//当前选项卡
				currentTab: '/pages/product/productDetail',
				//轮播图配置
				lunboData: [],
				autoplay: true, //是否自动切换
				interval: 3000, //自动切换时长
				duration: 1200, //滑动动画时长
				circular: true, //是否自动采用衔接滑动
				commonCount: 0,
				listCommon: [],
				listDescImg: [],
				id: '',
				goods: '',
				listPic: []
			}
		},
		onLoad(option) {
			console.log("onLoad option id :   ", option.id)
			this.fetchData(option.id) // 在页面加载时调用fetchData方法获取数据
			this.id = option.id
		},
		methods: {
			fetchData(id) {
				uni.request({
					url: global.baseUrl + 'api/goods/' + id, // 接口地址
					method: 'get',
					dataType: "json",
					header: {
						'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
					},
					success: (res) => {
						if (res.data.code == 0) {
							this.goods = res.data.data.detailVO
							this.listPic = res.data.data.listPic
							this.listDescImg = res.data.data.listDescImg
							this.commonCount = res.data.data.commonCount
							this.listCommon = res.data.data.listCommon
						} else {
							console.log("request result error: ", res.data.code)
						}
					},
					fail: (error) => {
						console.log(error)
					}
				})
			},
			//更多评论
			listGoodsCommon(id) {
				uni.reLaunch({
					url: '/pages/product/productCommon?id=' + id
				});
			},
			atOnce(id) {
                uni.reLaunch({
					url: '/pages/orderList/orderVerify?flag=1&id=' + id
				});
			},
			addCommon(id) {
			    uni.reLaunch({
					url: '/pages/product/addCommon?id=' + id
				});
			},
			//加入购物车
			addToShopCart(id) {
				var token = uni.getStorageSync("token")
				console.log("caches get  token value :  ", token)
				uni.request({
					url: global.baseUrl + 'api/cart/' + id, // 接口地址
					method: 'get',
					dataType: "json",
					header: {
						'X-Token': token
					},
					success: (res) => {
						if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});

						} else {
							console.log("request add cart result error: ", res.data.code)
						}
					},
					fail: (error) => {
						console.log(error)
					}
				})
			},
			//立即购买
			ImmediatePurchase() {

			}
		}
	}
</script>

<style>
	page {
		background: #f8f8f8;
		padding-bottom: 160rpx;
	}

	.container {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.carousel {
		height: 722rpx;
		position: relative
	}

	/*轮播控件*/
	.home-swiper {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		height: 750upx;
		overflow: hidden;
	}

	.slide-image {
		width: 100%;
		height: 100%;
	}

	/* 商品介绍 */
	.introduce-section {
		background: #ffffff;
		padding: 20rpx 30rpx;
	}

	.introduce-section .title {
		font-size: 32rpx;
		color: #303133;
		height: 50rpx;
		line-height: 50rpx;
	}

	.introduce-section .price-box {
		display: flex;
		align-items: baseline;
		height: 50rpx;
		padding: 10rpx 0;
		font-size: 26rpx;
		color: #fa436a;
	}

	.introduce-section .price {
		font-size: 34rpx;
	}

	.introduce-section .m-price {
		margin: 0 12rpx;
		color: #909399;
		text-decoration: line-through;
	}

	.introduce-section .coupon-tip {
		align-items: center;
		padding: 4rpx 10rpx;
		background: #fa436a;
		font-size: 24rpx;
		color: #ffffff;
		border-radius: 6rpx;
		line-height: 1;
		transform: translateY(-4rpx);
	}

	.introduce-section .bot-row {
		display: flex;
		align-items: center;
		height: 30rpx;
		font-size: 24rpx;
		color: #909399;
	}

	.introduce-section .bot-row text {
		flex: 1;
	}

	.share-section {
		color: #606266;
		display: flex; /* 将容器设置为flex布局 */
		justify-content: right; /* 在主轴上居中对齐子项目 */
		align-items: right; /* 在交叉轴上居中对齐子项目 */
	}

	.share-section .addCart {
		padding-top: 20rpx;
		margin-left: 190rpx;
	}

	.share-section .mall {
		padding-top: 20rpx;
		margin-right: 40rpx;
	}

	.shareInformation {
		width: 100%;
		height: 275px;
	}

	.c-list {
		width: 100%;
		font-size: 26rpx;
	}

	.c-list .van-cell-text {
		width: 25%;
		display: flex;
		float: left;
		color: #606266;
	}

	.c-list .con .select-text {
		margin-right: 10rpx;
		color: #303133;
	}

	.typeInformation {
		width: 100%;
		margin-bottom: 5%;
	}

	.typeInformation .a-t {
		display: flex;
		width: 90%;
		margin: 0 auto;
	}

	.typeInformation .a-t image {
		width: 130rpx;
		height: 130rpx;
		border-radius: 8rpx;
	}

	.typeInformation .a-t .right {
		display: flex;
		flex-direction: column;
		padding-left: 24rpx;
		font-size: 26rpx;
		color: #606266;
		line-height: 42rpx;
	}

	.typeInformation .a-t .right .price {
		font-size: 32rpx;
		color: #fa436a;
		margin-bottom: 10rpx;

	}

	.typeInformation .a-t .right .select-text {
		margin-right: 10rpx;
	}

	.typeInformation .attr-list {
		display: flex;
		flex-direction: column;
		font-size: 30rpx;
		color: #606266;
		padding-top: 30rpx;
		padding-left: 10rpx;
	}

	.typeInformation .item-list {
		padding: 20rpx 0 0;
		display: flex;
		flex-wrap: wrap;
	}

	.typeInformation .item-list .selected {
		background: #fbebee;
		color: #fa436a;
	}

	.typeInformation .item-list text {
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		background: #eee;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 100rpx;
		min-width: 60rpx;
		height: 60rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #303133;
	}

	.typeInformation .vButton {
		width: 90%;
		margin: 0 auto;
		margin-top: 30rpx
	}

	.c-row {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
		font-size: 26rpx;
		color: #606266;
		background-color: #FFFFFF;
	}

	.c-row .tit {
		width: 23%;
	}

	.c-row .con-list {
		flex: 1;
		display: flex;
		flex-direction: column;
		color: #303133;
		line-height: 40rpx;
	}

	.c-row .bz-list {
		height: 40rpx;
		font-size: 26rpx;
		color: #303133;
	}

	.c-row .con {
		flex: 1;
	}

	.c-row .bz-list text {
		display: inline-block;
		margin-right: 30rpx;
	}

	.eva-section {
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		margin-top: 16rpx;
	}

	.eva-section .eva-box {
		display: flex;
		padding: 20rpx 32rpx;
	}

	.eva-section .eva-box .myPhoto {
		flex-shrink: 0;
		width: 80rpx;
		height: 80rpx;
	}

	.eva-box .right {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: 28rpx;
		color: #606266;
		padding-left: 26rpx;
	}

	.eva-box .right .name {
		font-size: 28rpx;
		color: #303133;
	}

	.eva-box .right .con {
		font-size: 28rpx;
		color: #303133;
		padding: 20rpx 0;
	}

	.eva-box .right .bot {
		font-size: 24rpx;
		display: flex;
		color: #909399;
	}

	.detail-desc {
		background-color: #FFFFFF;
		margin: 16rpx 0px;
		height: 2026px;
	}

	.detail-desc .d-header {
		align-items: center;
		height: 80rpx;
		font-size: 30rpx;
		color: #303133;
		position: relative;
		text-align: center;
		line-height: 80rpx;
	}

	.e-header {
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;
	}

	.van-cell-left {
		margin-left: 26rpx;
	}

	.van-cell-right {
		margin-right: 26rpx;
	}

	.detail-desc .d-header text {
		padding: 0 20rpx;
		background: #FFFFFF;
		position: relative;
	}

	.detail-desc .d-photo {
		width: 100%;
		height: 400px;
	}

	.page-bottom {
		position: fixed;
		left: 30rpx;
		bottom: 30rpx;
		display: flex;
		width: 690rpx;
		height: 100rpx;
		border-radius: 16rpx;
	}
</style>